<!--产品细节-->
<template>
    <div>
        <!--    对话框-->
        <make-b-o-m-dialog @callSaveSuccess="handleSaveSuccess" :visible.sync="makeBomDialogVisible" @call-closed="handleBOMDialogClosed" :bomData="bomData"/>
<!--       领料抽屉-->
        <make-b-o-m-add-dialog @bindSuccess="handleBindSuccess" :visible="makeBomAddDialogVisible" :productId="details.id" @call-closed="handleBOMAddDialogClosed"/>
        <!--      {{ details }}-->
<!--        绑定供应商信息对话框-->
        <bind-supporter-dialog @callClosed="handleSupporterDialogClosed" :visible="supporterDialogVisible" :details="details" :info="supporterInfo"/>

        <el-row justify="space-evenly" align="middle">
            <el-col :span="1">
                <bar-icon style="padding-left: 30px; cursor:pointer;" @click="handleGetBack" :icon="'back'" :height="20"
                          :width="20" :color="'#a8a8a8'"/>
            </el-col>
            <el-col :span="4">
                <el-row>
                    <el-col :span="4">
                        <bar-icon icon="fileDictionary" :width="50" :height="50"/>
                    </el-col>
                    <el-col :span="20">
                        <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="修改名称"
                                placement="top"
                        >
                            <input class="input-name" v-model="form.name"/>

                        </el-tooltip>

                    </el-col>

                </el-row>
            </el-col>
            <el-col :span="12">
                <el-form v-model="form" :inline="true">
                    <el-form-item label="型号">
                        <el-input v-model="form.model" placeholder="请输入内容" :disabled="random" style="width: 150px;"/>
                        <el-switch v-model="random"/>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="form.stockStatus" placeholder="请选择" style="width: 100px">
                            <el-option label="启用" value="1"/>
                            <el-option label="禁用" value="0"/>
                            <el-option label="废弃" value="-1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类别" label-width="70px">
                        <el-radio-group v-model="form.category" @change="handleCategoryChanged">
                            <el-radio border :value="0">产品</el-radio>
                            <el-radio border :value="1">物料</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="安全库存">
                        <el-input v-model="form.inventory" placeholder="请输入内容" style="width: 100px;"/>
                    </el-form-item>

                    <el-form-item label="单位">
                        <template v-if="details.unitStatus === 0">
                            <el-alert title="该单位已弃用，请及时修改！" type="error"  close-text="知道了" show-icon/>
                        </template>
                        <el-select v-model="form.idUnit" placeholder="请选择" style="width: 100px">

                            <template v-for="item in units">
                                <el-option :label="item.label" :value="item.value"/>
                            </template>

                        </el-select>

                    </el-form-item>

                    <el-form-item label="当前库存" label-width="70px">
                        <el-input v-model="form.count" disabled placeholder="请输入内容" style="width: 100px;"/>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="form.classify" placeholder="请选择" style="width: 100px">

                            <template v-for="item in types">
                                <el-option :label="item.label" :value="item.value"/>
                            </template>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" :rules="{
                                                required: true,
                                                message: 'domain can not be null',
                                                trigger: 'blur',
                                              }">
                        <el-input type="textarea" :rows="2" v-model="form.comments" placeholder="请输入内容"
                                  style="width: 677px;"/>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6">
                <div style="display: flex;justify-items: center">
                    <el-button @click="handleAddBOM" type="primary">领料</el-button>
<!--                    <el-button type="primary">退料</el-button>-->
<!--                    <el-button type="primary" plain>入库</el-button>-->
<!--                    <el-button type="primary" plain>完工</el-button>-->
                    <el-button>打印</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="display: flex; justify-items: center;align-items: center;justify-content: center">
            <el-button type="primary" style="width: 200px" @click="handleSave">保存</el-button>
        </div>
        <div style="margin-left: 40px;margin-right: 40px;margin-top: 40px;">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="工单信息" name="ticket">
                    <el-carousel indicator-position="outside" :autoplay="false" height="400px">
                        <el-carousel-item v-for="(item,index) in productDetailInfos.order.length" :key="index">
                            <ticket
                                    :orders="productDetailInfos.order"
                                    :plans="productDetailInfos.plan"
                                    :idx="index"
                                    :refresh="refreshBOM"
                                    @bomSelected="handleBOMChanged"
                            />
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="用料清单" name="material">用料清单</el-tab-pane>
                <el-tab-pane label="供应商" name="support">
                    <supporter-detail @bind-supporter-call-back="bindSupporter" :details:="details"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import BarIcon from '../../../components/widget/icon/BarIcon.vue'
import Ticket from './Ticket.vue'
import mdAPI from '../../../util/request-md/mat-pro/mat-pro.js'
import unitAPI from "@/util/request-md/unit/unit.js"
import rulesAPI from "@/util/request-md/rules/rules.js";
import MakeBOMDialog from "@/components/widget/dialog/MakeBOMDialog.vue";
import MakeBOMAddDialog from "@/components/widget/drawer/MakeBOMAddDrawer.vue";
import SupporterDetail from "@/views/md/detail/SupporterDetail.vue"
import BindSupporterDialog from "@/components/widget/dialog/BindSupporterDialog.vue";
export default {
    name:'info.vue',
    emits: ['getBack'],
    components: {
        BindSupporterDialog,
        SupporterDetail,
        MakeBOMAddDialog,
        MakeBOMDialog,
        BarIcon,
        Ticket,
    },
    data() {
        return {
            random:false,//是否自动生成编号
            refreshBOM:false,
            makeBomDialogVisible:false,//显示BOM编辑的弹窗
            makeBomAddDialogVisible:false,//显示BOM添加的弹窗
            activeName: 'ticket',
            units: [
                {
                    label: '',
                    value: ''
                }
            ],//单位
            details:{},
            bomData:{},
            supporterDialogVisible:false,
            supporterInfo:{},
            types: [],//类型
            proType: [],
            matType: [],
            form: {
                id: '',
                name: '',//名称
                model: '',//型号
                idUnit: '',//单位
                category: '',//类别
                classify: '',//类型
                stockStatus: '1',//是否启用
                inventory: '',//安全库存
                count: '',//数量
                comments: '',//备注
            },
            productDetailInfos: {
                bom: [],//物料组成
                order: [],//工单
                plan: []//计划
            }
        }
    },
    watch:{
        random(val){
            if (val) {
                this.getRules();
            } else {
                this.form.model = '';
            }
        }
    },
    methods: {
        handleGetBack() {
            this.$emit('getBack');
        },
        handleSupporterDialogClosed(){
            this.supporterDialogVisible = false;
        },
        //加载单位信息
        loadUnits() {
            this.units = [];
            unitAPI.getAllUnit((res) => {
                if (res.code === 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].status === 1){
                            this.units.push({
                                label: res.data[i].name,
                                value: res.data[i].idUnit
                            })
                        }
                    }
                } else {
                    this.$message.error("获取失败" + res.code);
                }
            })
        },
        handleBindSuccess(){
            //刷新BOM数据
            this.refreshBOM = !this.refreshBOM;
        },
        //绑定供应商信息
        bindSupporter(data){
            this.supporterInfo = data;
            this.supporterDialogVisible = true;

        },
        //获取点击的BOM信息
        handleBOMChanged(data,idx){
            this.makeBomDialogVisible = true;
            this.bomData = data;
            this.bomData.proId = this.details.id;
            this.bomData.orderId = this.productDetailInfos.order[idx].orderId;
        },
        //处理保存成功之后的事件
        handleSaveSuccess(){
            this.makeBomDialogVisible = false;
            this.refreshBOM = !this.refreshBOM;
        },
        //添加bom信息
        handleAddBOM() {
            console.log(">>>>点击了添加BOM")
            this.makeBomAddDialogVisible = true;
        },
        //获取产品分类信息
        loadClassifyInfo() {
            this.types = [];
            this.proType = [];
            this.matType = [];
            mdAPI.getMatProClassify((res) => {
                if (res.code === 200) {
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].category === 0) {
                            this.proType.push({
                                value: result[i].idClassify,
                                label: result[i].name,
                            });
                        } else {
                            this.matType.push({
                                value: result[i].idClassify,
                                label: result[i].name,
                            });
                        }
                    }
                }
            });
        },
        //产品物料类别发生了改变
        handleCategoryChanged(data) {
            if (data === 0) {
                this.types = this.proType;
            }
            if (data === 1) {
                this.types = this.matType;
            }
            this.form.classify =this.types[0].value;
        },
        handleSave() {
            //提示是否保存
            this.$confirm('当前操作将保存当前信息，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //保存
                mdAPI.updateProduct(this.form, (res) => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.details = this.form;
                    } else {
                        this.$message.error("修改异常" + res.code);
                    }
                });

            }).catch(() => {

            });
        },
        getRules(){
            console.log(this.form.category,">>>this.form.category")
            if(this.form.category === 0){
                rulesAPI.getEncoding({rulesName: 'PRO_NO'}, ((res) => {
                    if (res.code === 200) {
                        this.form.model = res.data;
                    }else{
                        this.$message.error("获取异常"+res.code);
                    }
                }));
            }
            if(this.form.category === 1){
                rulesAPI.getEncoding({rulesName: 'MAT_NO'}, ((res) => {
                    if (res.code === 200) {
                        this.form.model = res.data;
                    }else{
                        this.$message.error("获取异常"+res.code);
                    }
                }));
            }
        },
        handleBOMDialogClosed(){
            this.makeBomDialogVisible = false;
        },
        handleBOMAddDialogClosed(){
            this.makeBomAddDialogVisible =false;
        }
    },
    mounted() {
        //读取
        this.details = JSON.parse(localStorage.getItem('details'));
        console.log(this.details,">>>>>this.details")
        this.form.id = this.details.id;
        this.form.model = this.details.model;
        this.form.idUnit = this.details.unitId + "";
        this.form.category = this.details.category;
        this.form.classify = this.details.classifyId;
        this.form.stockStatus = this.details.stockStatus;
        this.form.inventory = this.details.inventory;
        this.form.count = this.details.count;
        this.form.comments = this.details.comments;
        this.form.name = this.details.name;
        this.loadUnits();
        this.loadClassifyInfo();
        //存储ID信息
        localStorage.setItem('matId',this.details.id);
        localStorage.setItem('unitName',this.details.unitName);
        this.types = this.details.category === 0 ? this.proType : this.matType;
        mdAPI.getProductOrders(this.details.id, ((res) => {
            if (res.code === 200) {
                this.productDetailInfos.order = res.data;
                console.log(this.productDetailInfos.order,">>>>>>>productDetailInfos.order");
            }
        }));
        mdAPI.getProductPlans(this.details.id, ((res) => {
            if (res.code === 200) {
                this.productDetailInfos.plan = res.data;
                console.log(this.productDetailInfos.plan,">>>>>>>productDetailInfos.plan");
            }
        }));
    },

};
</script>

<style scoped>
.input-name {
    /* 去除默认样式 */
    border: none;
    outline: none;
    background-color: transparent; /* 使背景透明 */
    font-size: 20px; /* 设置字体大小 */
    padding: 8px; /* 设置内边距 */
    width: 80%;
    font-weight: bold;
    border-bottom: 1px solid #e1e1e1; /* 添加底部边框 */
    transition: border-bottom-color 0.3s; /* 添加过渡效果 */

}

/* 当输入框获取焦点时改变底部边框颜色 */
.input-name:focus {
    border-bottom-color: #007bff; /* 举例：蓝色 */
}
</style>